import React, { Component } from 'react';
import "../styles/views/Search.scss"
import { good_hotsearch, good_search } from "../api/index"

import { SearchBar, NavBar } from "antd-mobile"


class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hotlist: []
        }
    }
    back(){
        this.props.history.go(-1)
    }
    toSearch(value){
        good_search({searchkey: value}).then(res=>{
            console.log(res);
        })
    }
    async gosearch(item){
        let res = await good_search({searchkey: item})
        // this.props.history.push({ pathname: '/index/allgood', state:{id} })
        console.log(res);
    }
    async componentDidMount() {
        let res = await good_hotsearch()
        console.log(res);
        this.setState({
            hotlist: res.data.list
        })
    }
    render() {
        return (
            <div className='search'>
                <div className="head">
                    <NavBar onBack={() => { this.back() }}>搜索</NavBar>
                    <div className='search'>
                        <SearchBar placeholder='请输入内容' onSearch={()=>{this.toSearch()}}/>取消
                    </div>
                </div>
                <h2>最近搜索</h2>
                <div className='hot'>
                    <h2>热门搜索</h2>
                    <div className='hotlist'>
                    {
                        this.state.hotlist.map((item, index) => {
                            return (
                                <ul key={index}>
                                    <li onClick={()=>{this.gosearch(item)}}>{item}</li>
                                </ul>
                            )
                        })
                    }
                </div>
                </div> 
            </div>
        );
    }
}

export default Search;